<template>
    <div>
        <n-button @click="showAddModal = true">添加分类</n-button>
        <n-table :bordered="false" :single-line="false">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>操作</th>

                </tr>
            </thead>
            <tbody v-for="(item, index) in categories" :key="index">
                <tr>
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>
                        <n-space>
                            <n-button @click="updateCategory(item)">修改</n-button>
                            <n-button @click="deleteCategory(item)">删除</n-button>
                        </n-space>

                    </td>

                </tr>

            </tbody>
        </n-table>

        <n-modal v-model:show="showAddModal" preset="dialog" title="Dialog">
            <template #header>
                <div>添加分类</div>
            </template>
            <div>
                <n-input v-model:value="addCategory.name" placeholder="请输入分类名称"></n-input>

            </div>
            <template #action>
                <div><n-button @click="add">提交</n-button></div>
            </template>
        </n-modal>

        <n-modal v-model:show="showUpdateModal" preset="dialog" title="Dialog">
            <template #header>
                <div>修改分类</div>
            </template>
            <div>
                    <n-input v-model:value="updatingCategory.name" placeholder="请输入分类名称"></n-input>
                    <!-- <n-input v-model:value="updatingCategory.id" placeholder="请输入分类id"></n-input> -->
            </div>
            <template #action>
                <div><n-button @click="update">提交</n-button></div>
            </template>
        </n-modal>
    </div>
</template>

<script setup>
import { ref, reactive, inject, onMounted } from 'vue'
import { AdminStore } from '../../stores/admin'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()

const axios = inject('axios')
const message = inject('message')
const dialog = inject('dialog')

const adminStore = AdminStore()

const categories = ref([])
const showAddModal = ref(false)
const showUpdateModal = ref(false)
const addCategory = reactive({
    name: ''
})
const updatingCategory = reactive({
    name: '',
    id: 0
})

onMounted(() => {
    loadData()
})

const loadData = async () => {
    let results = await axios.get('/category/getList')
    categories.value = results.data.results
    // console.log(results)
}

const add = async () => {
    let results = await axios.post('/category/_token/add', { name: addCategory.name })
    if (results.data.code == 200) {
        message.info(results.data.msg)
        loadData()

    } else {
        message.error(results.data.msg)
    }
    // console.log(results)
    showAddModal.value = false
}

const updateCategory = async item => {
    showUpdateModal.value = true
    updatingCategory.id = item.id
    updatingCategory.name = item.name
    
    // console.log(results)
}

const update = async () => {
    let results = await axios.post('/category/_token/update', { id: updatingCategory.id, name: updatingCategory.name })
    if (results.data.code == 200) {
        message.info(results.data.msg)
        loadData()

    } else {
        message.error(results.data.msg)
    }
    showUpdateModal.value = false
}

const deleteCategory = async item => {
    dialog.warning({
        title: '警告',
        content: '确定删除改分类？',
        positiveText: '确定',
        negativeText: '取消',
        onPositiveClick: async () => {
            let results = await axios.post(`/category/_token/delete?id=${item.id}`)
            if (results.data.code == 200) {
                message.info(results.data.msg)
                loadData()

            } else {
                message.error(results.data.msg)
            }
        },
        onNegativeClick: () => {

        }
    })


}
</script>

<style lang="scss" scoped>

</style>